<template>
	<view>
		<topbar title="注册"></topbar>
		<view class="content">
			<view class="dis_f_co_c_c" style="width: 100%;">
				<view class="login dis_f_c_c" style="margin-bottom: 42rpx;">
					<image src="../../static/login/zh.png" mode="aspectFit"></image>
					<u-input type="number" v-model="account" placeholder="请输入手机号" maxlength="11"></u-input>
				</view>
			
				<view class="login dis_f_c_c" style="margin-bottom: 42rpx;">
					<image src="../../static/login/code.png" mode="aspectFit"></image>
					<u-input type="text" v-model="code" placeholder="请输入验证码" maxlength="4"></u-input>
					<u-toast ref="uToast"></u-toast>
					<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
					</u-verification-code>
					<u-button @tap="getCode">{{tips}}</u-button>
				</view>
				<view class="btn dis_f_c_c" @click="submit">
					登录
				</view>
				<view class="btn dis_f_c_c" @click='register' style="margin-top: 50rpx;">
					密码登录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: '',
				password: '',
				tips: '',
				seconds: 60,
				code:'',
				yqm:'',
			};
		},
		methods: {
			// 返回
			go_back() {
				this.$.back()
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$.ajax(1, 'post', 'wxpay/sms', {
						mobile:this.account
					}, (res) => {
						console.log(res)
						if(res.code == 1){
						uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}else{
							this.$.ti_shi(res.msg)
						}
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				this.$u.toast('倒计时开始');
			},
			register(){
				this.$.open('/pages/login/login')
			},
			submit(){
				this.$.ajax(1, 'post', 'index/loginmian', {
					phone:this.account,
					salt:this.code,
				}, (res) => {
					console.log(res)
					if(res.code == 1){
					this.$.ti_shi(res.msg)
					if(res.code == 1){
						this.$.ti_shi(res.msg)
						uni.setStorageSync('uid',res.uid);
						uni.setStorageSync('token',res.token);
						let promise = this.tim.login({
							userID: res.uid.toString(),
							userSig: res.sign
						});
						promise.then((res) => {
							//登录成功后 更新登录状态
							this.$store.commit("toggleIsLogin", true);
							//自己平台的用户基础信息
							// uni.setStorageSync('userInfo', JSON.stringify(userInfo))
							//tim 返回的用户信息
							uni.setStorageSync('userTIMInfo', JSON.stringify(res.data))
							console.log(res.data)
							
						}).catch((err) => {
							console.warn('login error:', err); // 登录失败的相关信息
						});
						this.timer = setTimeout( () => {
						    uni.switchTab({
						    	url:'/pages/index/index'
						    })
						}, 1000)
						
					}else{
						this.$.ti_shi(res.msg)
					}
					}else{
						this.$.ti_shi(res.msg)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #FFF !important;
	}

	.content {
		width: 100%;
		padding: 0 64rpx;
		top: 240rpx;
		z-index: 998;
		position: absolute;

		.login {
			width: 100%;
			height: 100rpx;
			background-color: #F6F6F6;
			border-radius: 20rpx;
			padding: 30rpx 36rpx;

			image {
				width: 28.25rpx;
				height: 37.82rpx;
				margin-right: 15.75rpx;
			}
		}

		.btn {
			width: 100%;
			height: 92rpx;
			background-color: #E23C63;
			border-radius: 46rpx;
			color: #FFF;
			font-size: 32rpx;
		}
	}
</style>
